<template>
  <div>
    <headerNav></headerNav>
    <div class="projectQuery">
      <div class="policyNotice_Nav">
        <p>
          <span @click="$router.push('/')">首页</span>>
          <span>项目查询</span>
        </p>
      </div>
      <div class="policyNotice_top">
        <div class="select-box">
          <div class="select-list">
            <!-- 省级 -->
            <div class="select-item flex flex-start">
              <div class="item-lable">地区：</div>
              <div v-if="provinceLevel > -1" class="item-info" ref="policyMore">
                <span class="active">
                  {{ regionData[provinceLevel].province }}
                  <img
                    src="@/static/image/region_cha.png"
                    @click="provinceEmpty"
                  />
                </span>
              </div>
              <div v-else class="item-info" ref="policyMore">
                <span @click="provinceActive(-1)" :class="provinceLevel == -1 ? 'active' : ''">全部</span>
                <span
                  :class="provinceLevel == index ? 'active' : ''"
                  v-for="(item, index) in regionData"
                  :key="index"
                  @click="provinceActive(index)"
                >{{ item.province }}</span>
              </div>
              <div
                v-if="provinceLevel == -1 && judgeWords(regionData, 1)"
                class="more"
                @click="MoreEvent('policyMore')"
              >
                <span ref="policyMore1">更多</span>
                <img ref="policyMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
            <!-- 市级 -->
            <div v-if="provinceLevel > -1" class="select-item flex flex-start">
              <div class="item-lable"></div>
              <div v-if="cityLevel > -1" class="item-info" ref="cityMore">
                <span class="active">
                  {{ regionData[provinceLevel].city[cityLevel].name }}
                  <img
                    src="@/static/image/region_cha.png"
                    @click="cityEmpty"
                  />
                </span>
              </div>
              <div v-else class="item-info" ref="cityMore">
                <span @click="cityActive(-1)" :class="cityLevel === -1 ? 'active' : ''">全部</span>
                <span
                  @click="cityActive(index)"
                  :class="cityLevel === index ? 'active' : ''"
                  v-for="(item, index) in regionData[provinceLevel].city"
                  :key="index"
                >{{ item.name }}</span>
              </div>
              <div
                v-if="cityLevel === -1 && judgeWords(regionData[provinceLevel].city, 2)"
                class="more"
                @click="MoreEvent('cityMore')"
              >
                <span ref="cityMore1">更多</span>
                <img ref="cityMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
            <!-- 地区 -->
            <div v-if="cityLevel > -1" class="select-item flex flex-start">
              <div class="item-lable"></div>
              <div class="item-info" ref="areaMore">
                <span @click="areaActive(-1)" :class="areaLevel === -1 ? 'active' : ''">全部</span>
                <span
                  :class="areaLevel === index ? 'active' : ''"
                  v-for="(item, index) in regionData[provinceLevel].city[cityLevel].area"
                  :key="index"
                  @click="areaActive(index)"
                >{{ item }}</span>
              </div>
              <div
                v-if="judgeWords(regionData[provinceLevel].city[cityLevel].area,3)"
                class="more"
                @click="MoreEvent('areaMore')"
              >
                <span ref="areaMore1">更多</span>
                <img ref="areaMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
          </div>
        </div>

        <div class="policyNotice_top_region">
          <div class="region_provincial">
            <div class="region_provincial_left">
              <span>项目类别：</span>
            </div>
            <span
              class="changeHanld"
              @click="enterpriseData.projectCategory = ''"
              :class="!enterpriseData.projectCategory ? 'active' : ''"
            >全部</span>
            <ul class="region_provincial_content" :class="showCategory ? '' : 'induStry_qh'">
              <li
                v-for="(item, index) in ItemCategoryList"
                :key="index"
                :class="enterpriseData.projectCategory == item ? 'active' : ''"
                @click="enterpriseData.projectCategory = item"
                class="changeHanld"
              >{{ item }}</li>
            </ul>
            <div v-if="judgeWords(ItemCategoryList, 4)">
              <div
                class="more changeHanld"
                v-show="showCategory"
                @click="showCategory = !showCategory"
              >
                更多
                <i class="el-icon-caret-bottom"></i>
              </div>
              <div
                class="more changeHanld"
                :class="!showCategory ? 'active' : ''"
                v-show="!showCategory"
                @click="showCategory = !showCategory"
              >
                收起
                <i class="el-icon-caret-top"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="policyNotice_top_region">
          <div class="region_provincial">
            <div class="region_provincial_left">
              <span>所属行业：</span>
            </div>
            <span
              class="changeHanld"
              :class="!enterpriseData.industry ? 'active' : ''"
              @click="enterpriseData.industry = ''"
            >全部</span>
            <ul class="region_provincial_content" :class="induStry ? '' : 'induStry_qh'">
              <li
                v-for="(item, index) in IndustryList"
                :key="index"
                class="changeHanld"
                @click="enterpriseData.industry = item"
                :class="enterpriseData.industry == item ? 'active' : ''"
                v-show="item != '-' && item != '81'"
              >{{ item }}</li>
            </ul>
            <div v-if="judgeWords(IndustryList, 4)">
              <div class="more changeHanld" v-show="induStry" @click="induStry = !induStry">
                更多
                <i class="el-icon-caret-bottom"></i>
              </div>
              <div
                class="more changeHanld"
                :class="!induStry ? 'active' : ''"
                v-show="!induStry"
                @click="induStry = !induStry"
              >
                收起
                <i class="el-icon-caret-top"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="policyNotice_top_region">
          <div class="region_provincial">
            <div class="region_provincial_left">
              <span>级别：</span>
            </div>
            <span
              class="changeHanld"
              @click="enterpriseData.projectLevel = ''"
              :class="!enterpriseData.projectLevel ? 'active' : ''"
            >全部</span>
            <ul class="region_provincial_content" :class="showRank ? '' : 'induStry_qh'">
              <li
                v-for="(item, index) in RankList"
                :class="enterpriseData.projectLevel == item ? 'active' : ''"
                :key="index"
                class="changeHanld"
                @click="enterpriseData.projectLevel = item"
              >{{ item }}</li>
            </ul>
            <div v-if="judgeWords(RankList, 4)">
              <div class="more changeHanld" v-show="showRank" @click="showRank = !showRank">
                更多
                <i class="el-icon-caret-bottom"></i>
              </div>
              <div
                class="more changeHanld"
                :class="!showRank ? 'active' : ''"
                v-show="!showRank"
                @click="showRank = !showRank"
              >
                收起
                <i class="el-icon-caret-top"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="policyNotice_top_region">
          <div class="region_provincial">
            <div class="region_provincial_left">
              <span>部门：</span>
            </div>
            <span
              class="changeHanld"
              @click="enterpriseData.department = ''"
              :class="!enterpriseData.department ? 'active' : ''"
            >全部</span>
            <ul class="region_provincial_content" :class="showSection ? '' : 'induStry_qh'">
              <li
                v-for="item in AllDepartmentList"
                @click="enterpriseData.department = item"
                :class="enterpriseData.department == item ? 'active' : ''"
                class="changeHanld"
                :key="item"
              >{{ item }}</li>
            </ul>
            <div v-if="judgeWords(AllDepartmentList, 4)">
              <div
                class="more changeHanld"
                v-show="showSection"
                @click="showSection = !showSection"
              >
                更多
                <i class="el-icon-caret-bottom"></i>
              </div>
              <div
                class="more changeHanld"
                :class="!showSection ? 'active' : ''"
                v-show="!showSection"
                @click="showSection = !showSection"
              >
                收起
                <i class="el-icon-caret-top"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="policyNotice_top_region">
          <div class="region_provincial">
            <div class="region_provincial_left">
              <span class="particularYear">通过年份：</span>
            </div>
            <div class="region_provincial_content particularYear_provincial_content">
              <el-date-picker
                v-model="enterpriseData.startParticularYear"
                type="year"
                size="mini"
                placeholder="开始年份"
              ></el-date-picker>
              <p class="particularYear_ps">到</p>
              <el-date-picker
                v-model="enterpriseData.endParticularYear"
                type="year"
                size="mini"
                placeholder="结束年份"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="policyNotice_top_region">
          <div class="region_provincial">
            <div class="region_provincial_left">
              <span class="particularYear">关键字：</span>
            </div>

            <div class="search_content">
              <input type="text" placeholder="请输入项目名称关键字" v-model="projectName" />
              <span @click="searchHotKey" class="changeHanld">搜索</span>
            </div>
            <div v-show="isShowError" class="search_right" @click="$router.push('/projectMap')">项目图谱</div>
            <div
              v-show="!isShowError"
              class="search_right"
              @click="$router.push('/fenProjectMap')"
            >项目图谱</div>
          </div>
        </div>
      </div>
      <div class="policyNotice_condition">
        <div class="policyNotice_condition_left">
          <span>已选条件：</span>
        </div>
        <ul class="policyNotice_condition_right">
          <li v-for="(item, index) in getSelectCondition" :key="index">
            <span>{{ item.replace(/[{|}]/g, "").split(":")[1] }}</span>
            <img src="../../assets/qicha.png" alt @click="delSelect(item)" />
          </li>
        </ul>
      </div>
      <div class="policyNotice_total">
        已为你找到
        <span>{{ totalElements }}</span>条
      </div>
      <div class="policyNotice_content">
        <div class="policyNotice_content_top">
          <div class="company">申报单位</div>
          <div class="region">企业地区</div>
          <div class="name">项目名称</div>
          <div class="category">项目类别</div>
          <div class="particularYear">通过年份</div>
        </div>
        <div
          class="policyNotice_content_content"
          v-loading="loading"
          v-show="notYet"
          style="min-height: 540px; z-index: 1"
        >
          <div
            v-show="projectList.length > 0"
            class="policyNotice_content_content_content changeHanld"
            v-for="(item, index) in projectList"
            :key="index"
          >
            <div class="unit" @click="jumpDetails(item.companyId)">{{ item.companyName }}</div>
            <div class="region">{{ item.province }}{{ item.city }}</div>
            <div class="policy_name" v-html="item.projectName"></div>
            <div class="category">{{ item.projectCategory }}</div>
            <div class="year">{{ item.particularYear }}</div>
          </div>
          <div class="nodata" v-show="projectList.length == 0" v-loading="loading">
            <img src="../../../static/image/noDataBox.png" alt />
            <p>
              请
              <span style="color: #44a2ff;" class="changeHanld" @click="toLogin">登录</span>
              后，进行相关数据查询操作
            </p>
          </div>
        </div>
        <div class="policyNotice_content_content content_imgse" v-show="!notYet">
          <img src="@/static/image/searchBox/nullBox.png" alt />
          <p>暂无数据</p>
        </div>
      </div>
      <div class="policyNotice_bottom" v-show="projectList.length > 0">
        <paging ref="paging_zi" v-on:CurrentPage="accept_CurrentValue"></paging>
      </div>

      <!-- 登录弹窗 -->
      <login-dialog ref="login" @reload="reload"></login-dialog>

      <!-- 显示解锁会员 -->
      <el-dialog
        v-model="showCenterVIP"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="320px"
      >
        <template #footer>
          <div class="contents_qydb">
            <img src="@/static/image/cwhyts2.png" alt class="imgs_qydb" />
            <div class="goVip">
              <div class="top">可关注数量已满</div>
              <div class="bn">成为VIP会员畅享更多权益</div>
            </div>
            <div class="option">
              <span class="spans_qydb" @click="showCenterVIP = false">再用看看</span>
              <p class="ps_qydb">升级VIP</p>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>

<script>
import paging from "../../components/paging.vue"; //分页
import {
  commonRequest,
  postRequest,
  getProjectRegionInfo,
  getProjectDepartmentInfo,
  getProjectLevelInfo,
  getProjectIndustryInfo,
  getProjectTypeInfo,
  queryRegionInfo,
  getProjectList,
  getSubInfo
} from "../../api/api.js";
import { getToken } from "../../util/validate.js";
import { sessionTake } from "@/util/validate.js";
import loginDialog from "../../components/login_item/LoginDialog"; //登录弹窗，登录之后留在当前页
export default {
  name: "department",
  components: {
    paging,
    loginDialog
  },
  head() {
    return {
      title: "项目查询-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "项目查询" },
        {
          hid: "description",
          name: "description",
          content: "各个地区的项目查询"
        }
      ]
    };
  },
  data() {
    return {
      showCenterVIP: false, // 显示vip框
      totalElements: 0, // 总页数
      projectName: "", // 项目名称(关键字)
      startYear: "", // 开始年份
      endYear: "", // 结束年份
      provinceLevel: -1, // 省级选中
      cityLevel: -1, // 市级选中
      areaLevel: -1, // 区级选中
      regionData: [], // 获取所属省级
      ItemCategoryList: [], //项目类别
      IndustryList: [], // 获取所属行业
      RankList: [], // 获取所有级别
      AllDepartmentList: [], // 获取所有部门
      projectList: [], // 项目列表
      getSelectCondition: [], // 选中的条件
      // 项目查询数据
      enterpriseData: {
        province: "", // 省
        city: "", // 市区
        area: "", //地区
        projectCategory: "", //类别
        industry: "", //行业
        projectLevel: "", //级别
        startParticularYear: "", //开始年份
        endParticularYear: "", //结束年份
        department: "" //部门
      },
      noData: false,
      showCategory: true, // 项目类型
      induStry: true, // 所属行业
      showRank: true, // 级别
      showSection: true, // 部门
      currentPage: 1, // 当前的页数
      loading: true,
      notYet: true,
      province: "",
      city: "",
      area: ""
    };
  },

  computed: {
    isShowError() {
      let params = this.$store.state.cityInfo;
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {
    enterpriseData: {
      deep: true,
      handler(val) {
        this.getprojectPageList();
      }
    }
  },
  mounted() {
    let val = this.$route.query.value;
    if (val) {
      this.projectName = val;
    }
    if (
      this.$route.query.startYear != undefined &&
      this.$route.query.startYear != ""
    ) {
      this.enterpriseData.startParticularYear = new Date(
        this.$route.query.startYear
      );
    }
    if (
      this.$route.query.endYear != undefined &&
      this.$route.query.endYear != ""
    ) {
      this.enterpriseData.endParticularYear = new Date(
        this.$route.query.endYear
      );
    }
    if (
      this.$route.query.keyword != undefined &&
      this.$route.query.keyword != ""
    ) {
      this.projectName = this.$route.query.keyword;
    }
    this.getProvincialLevel();
    this.getItemCategory(); // 项目类别
    this.getIndustry(); // 获取所属行业
    this.getRank(); // 获取所有级别
    this.getAllDepartment(); // 获取所有部门
  },

  methods: {
    // 更多收起切换
    MoreEvent(value) {
      if (this.$refs[value + "1"].innerHTML === "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    judgeWords(data, index) {
      if (data == undefined) {
        return false;
      }
      if (index == 1) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].province;
          }
          if (str.length * 14 + 20 * data.length > 908) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 2) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].name;
          }
          if (str.length * 14 + 20 * data.length > 908) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 3) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + 20 * data.length > 908) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 4) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + 20 * data.length > 908) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    },
    toLogin() {
      this.$refs.login.open();
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 跳转企业详情
    jumpDetails(id) {
      window.open("/enterprise?id=" + id, "_blank");
    },
    // 删除选中按钮
    delSelect(item) {
      let key = item
        .replace(/[{|}]/g, "")
        .split(":")[0]
        .trim();
      this.enterpriseData[key] = "";

      if (key == "area") {
        this.areaActive(-1);
      }
      if (key == "city") {
        this.cityEmpty();
      }
      if (key == "province") {
        this.provinceEmpty();
      }
      if (key == "projectName") {
        this.projectName = "";
      }
    },
    // 点击搜索按钮
    searchHotKey() {
      this.getprojectPageList();
    },
    // 改变日期的值(开始日期)
    changeStartVal(val) {
      if (val != null) {
        this.enterpriseData.startParticularYear = val.getFullYear();
      } else {
        this.enterpriseData.startParticularYear = "";
      }
    },
    // 改变日期的值(结束日期)
    changeEndVal(val) {
      if (val !== null) {
        this.enterpriseData.endParticularYear = val.getFullYear();
      } else {
        this.enterpriseData.endParticularYear = "";
      }
    },
    // 地区全部
    handleAll() {
      this.currentArea = "";
      this.noData = false;
      if (!this.currentArea) {
        if (this.selectArea.length == 2) {
          this.enterpriseData.area = "";
        } else if (this.selectArea.length == 1) {
          this.enterpriseData.city = "";
        } else {
        }
      }
    },
    // 接受当前选中页数
    accept_CurrentValue(value) {
      this.currentPage = value;
      this.getprojectPageList();
    },
    // 获取所属省级
    async getProvincialLevel() {
      let province = this.$route.query.province;
      let city = this.$route.query.city;
      let area = this.$route.query.area;
      if (area !== undefined) {
        this.area = area;
      }
      if (province !== undefined && city !== undefined) {
        this.province = province;
        this.city = city;
      } else if (province !== undefined && city === undefined) {
        this.province = province;
      } else if (province === undefined && city === undefined) {
        this.province = sessionTake("provinceName");
        this.city = sessionTake("cityName");
      }
      let areaData = await getProjectRegionInfo();
      if (areaData.code === 200) {
        this.regionData = areaData.result;
        let substation = await getSubInfo();
        if (
          substation.result.city !== "" &&
          substation.result.province !== ""
        ) {
          let areaParams = {
            province: substation.result.province,
            city: substation.result.city,
            type: 5
          };
          let areaData = await queryRegionInfo(areaParams);
          let city2 = {
            province: substation.result.province,
            city: [
              {
                name: substation.result.city,
                area: areaData.result
              }
            ]
          };
          let cityArr = [];
          cityArr.push(city2);
          this.regionData = cityArr;
          this.provinceLevel = 0;
          this.cityLevel = 0;
        } else {
          if (this.province) {
            for (let i = 0; i < this.regionData.length; i++) {
              if (this.regionData[i].province == this.province) {
                this.provinceLevel = i;
                for (let q = 0; q < this.regionData[i].city.length; q++) {
                  if (this.regionData[i].city[q].name == this.city) {
                    this.cityLevel = q;
                    if (area != undefined && area != "") {
                      for (
                        let w = 0;
                        w < this.regionData[i].city[q].area.length;
                        w++
                      ) {
                        if (this.regionData[i].city[q].area[w] == area) {
                          this.areaLevel = w;
                          break;
                        } else if (
                          w + 1 ==
                          this.regionData[i].city[q].area.length
                        ) {
                          break;
                        }
                      }
                    } else {
                      break;
                    }
                  } else if (q + 1 == this.regionData[i].city.length) {
                    break;
                  }
                }
              } else if (i + 1 == this.regionData.length) {
                break;
              }
            }
          }
        }
        this.getprojectPageList();
      }
    },
    // 省级清空
    provinceEmpty() {
      this.provinceLevel = -1;
      this.cityLevel = -1;
      this.areaLevel = -1;
      this.getprojectPageList();
    },
    // 省级地区切换
    provinceActive(index) {
      this.provinceLevel = index;
      this.getprojectPageList();
    },
    // 市级清空
    cityEmpty() {
      this.cityLevel = -1;
      this.areaLevel = -1;
      this.getprojectPageList();
    },
    // 市级地区切换
    cityActive(index) {
      this.cityLevel = index;
      this.getprojectPageList();
    },
    // 区级地区切换
    areaActive(index) {
      this.areaLevel = index;
      this.getprojectPageList();
    },
    // 获取项目类别
    getItemCategory() {
      getProjectTypeInfo().then(res => {
        this.ItemCategoryList = res.result;
      });
    },
    // 获取所属行业
    getIndustry() {
      getProjectIndustryInfo().then(res => {
        this.IndustryList = res.result;
      });
    },
    //获取所有级别
    getRank() {
      getProjectLevelInfo().then(res => {
        this.RankList = res.result;
      });
    },
    // 获取所有部门
    getAllDepartment() {
      getProjectDepartmentInfo().then(res => {
        this.AllDepartmentList = res.result;
      });
    },
    // 项目列表
    getprojectPageList() {
      this.loading = true;
      this.notYet = true;
      if (!getToken()) {
        this.loading = false;
        // this.$refs.login.open();
        // return;
      }
      let provinceValue = "";
      let cityValue = "";
      let areaValue = "";
      if (this.provinceLevel > -1) {
        provinceValue = this.regionData[this.provinceLevel].province;
      }
      if (this.cityLevel > -1) {
        cityValue = this.regionData[this.provinceLevel].city[this.cityLevel]
          .name;
      }
      if (this.areaLevel > -1) {
        areaValue = this.regionData[this.provinceLevel].city[this.cityLevel]
          .area[this.areaLevel];
      }
      this.getSelectCondition = []; // 初始化
      let obj = {
        province: provinceValue, // 省份
        city: cityValue, // 城市
        area: areaValue, // 地区
        projectCategory: this.enterpriseData.projectCategory, // 项目类型
        industry: this.enterpriseData.industry, // 行业
        projectLevel: this.enterpriseData.projectLevel, // 级别
        department: this.enterpriseData.department, // 部门
        startYear: this.enterpriseData.startParticularYear
          ? this.enterpriseData.startParticularYear.getFullYear()
          : "", // 开始年
        endYear: this.enterpriseData.endParticularYear
          ? this.enterpriseData.endParticularYear.getFullYear()
          : "", // 结束年
        projectName: this.projectName, // 搜索关键字
        pageSize: 10,
        pageIndex: this.currentPage - 1
      };

      for (const key in obj) {
        if (String(obj[key]).length == 0) {
          delete obj[key];
        }
      }

      let handleObj = { ...obj };
      let handleObjKey = Object.keys(handleObj);

      if (handleObjKey.indexOf("area") > -1) {
        delete handleObj["province"];
        delete handleObj["city"];
      } else if (handleObjKey.indexOf("city") > -1) {
        delete handleObj["province"];
      }
      for (const key in handleObj) {
        if (key == "pageSize" || key == "pageIndex") {
        } else {
          this.getSelectCondition.push(`{ ${key}: ${obj[key]} }`);
        }
      }
      this.loading = true;
      getProjectList(obj).then(res => {
        if (res.code == 500 && res.success == false) {
          this.showCenterVIP = true;
          this.$refs.paging_zi.totalValue(0);
        } else if (res.code == 10001) {
          // this.$refs.login.open();
          this.loading = false;
        } else {
          this.changeText(res.data.content, "projectName", this.projectName);
          this.loading = false;
          this.totalElements = res.data.totalElements;
          this.projectList = res.data.content;
          this.$refs.paging_zi.totalValue(res.data.totalElements);
          if (res.data.content.length == 0) {
            this.notYet = false;
          }
        }
      });
    },
    // 关键字标明红色
    changeText(result, key, val) {
      if (val != "") {
        let arr = val.split("");
        let old = [];
        arr.forEach(el => {
          old.push(el);
        });
        let arrText = [];
        result.forEach((el, index) => {
          el[key].split("").forEach(el1 => {
            arr.forEach(val => {
              if (val.indexOf(el1) !== -1) {
                el[key] = el[key].replace(
                  new RegExp(el1, "g"),
                  `<em style=color:red;font-style:normal;>${el1}</em>`
                );
              }
            });
          });
        });
        return result;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.contents_qydb {
  width: 200px;
  margin: 20px auto 0;
  // text-align: center;
  // position: relative;
  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

:deep(.el-dialog__footer) {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}
.content_imgse {
  background-color: transparent !important;
  box-shadow: 0 0 black !important;
  overflow: hidden;
  text-align: center;

  img {
    margin: 0 auto;
    margin-top: 138px;
    width: 300px;
    height: 210px;
  }

  p {
    color: rgb(204, 204, 204);
    font-size: 14px;
    margin-top: 10px 0;
  }
}

.projectQuery {
  width: 1200px;
  margin: 0 auto;

  .policyNotice_top {
    background-color: #fff;
    box-shadow: -1px 3px 6px #eee;
    .select-box {
      width: 100%;
      .select-list {
        width: 100%;
        .select-item {
          padding: 12px 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #f2faff;
          overflow: hidden;
          position: relative;
          .item-lable {
            width: 150px;
            padding: 2px 6px;
            box-sizing: border-box;
            text-align: left;
            font-size: 14px;
            color: #333;
            padding-top: 5px;
            box-sizing: border-box;
          }
          .item-info {
            width: 1035px;
            overflow: hidden;
            max-height: 32px;
            span {
              display: inline-block;
              font-size: 14px;
              padding: 4px 10px;
              margin: 3px 5px;
              background-color: #fff;
              color: #333;
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              img {
                width: 16px;
                position: absolute;
                right: -2px;
                top: -2px;
              }
              &:hover {
                background-color: #44a2ff;
                color: #fff;
                border-radius: 4px;
              }
            }
            .active {
              background-color: #44a2ff;
              color: #fff;
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              img {
                width: 16px;
                position: absolute;
                right: -2px;
                top: -2px;
              }
            }
          }
          .more {
            width: 50px;
            font-size: 14px;
            color: #44a2ff;
            padding-top: 5px;
            box-sizing: border-box;
            img {
              width: 8px;
              height: 6px;
              display: inline-block;
            }
          }
          .select-input {
            .item-lable {
              width: 58px;
            }
            .key-input {
              margin-left: 10px;
              input {
                width: 240px;
                height: 32px;
                background: #ffffff;
                border: 1px solid #daeaf5;
                border-radius: 4px 0px 0px 4px;
                padding-left: 12px;
                box-sizing: border-box;
                &::-webkit-input-placeholder {
                  color: #aaa;
                }
              }
              span {
                display: inline-block;
                width: 60px;
                height: 32px;
                line-height: 32px;
                background: #44a2ff;
                border-radius: 0px 4px 4px 0px;
                text-align: center;
                color: #fff;
                cursor: pointer;
              }
            }
          }
          .policy-map {
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #44a2ff;
            border-radius: 4px;
            text-align: center;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
    .policyNotice_top_region {
      padding: 12px 20px;
      border-bottom: 1px solid #f2faff;

      .region_provincial {
        position: relative;
        display: flex;
        align-items: flex-start;
        margin-top: 10px;

        & > span {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          padding: 4px 10px;
          border-radius: 4px;
          margin-right: 10px;
          &.active {
            background-color: #44a2ff;
            color: #fff;
          }
        }

        .region_provincial_left {
          width: 150px;
          display: flex;
          align-items: center;

          span {
            font-size: 14px;
            padding: 2px 6px;
            color: #333;
          }

          .particularYear {
            line-height: 28px;
          }
        }

        .region_provincial_content {
          display: flex;
          flex: 1;
          flex-wrap: wrap;
          overflow: hidden;
          max-height: 34px;
          margin-left: -8px;

          &.active {
            max-height: 1000px;
          }

          li {
            font-size: 14px;
            color: #333;
            height: 27px;
            padding: 4px 8px;
            border-radius: 4px;
            margin-bottom: 10px;
            margin-left: 10px;

            &:hover {
              background-color: #44a2ff;
              color: #fff;
              border-radius: 4px;
            }

            &.active {
              background-color: #44a2ff;
              color: #fff;
            }
          }
        }

        .induStry_qh {
          max-height: inherit;
        }

        img {
          position: absolute;
          top: -2px;
          right: -2px;
          height: 15px;
        }

        .more {
          color: #44a2ff;
          font-size: 14px;
        }

        .particularYear_provincial_content {
          .particularYear_ps {
            display: inline-block;
            margin: 0 10px;
            line-height: 29px;
            color: #999;
          }
        }

        .search_right {
          text-align: center;
          padding: 6px 10px;
          background-color: #44a2ff;
          border-radius: 4px;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
        }

        .search_content {
          flex: 1;
          display: flex;
          align-items: center;

          input {
            width: 240px;
            height: 32px;
            padding-left: 10px;
            background: rgb(255, 255, 255);
            border: 1px solid rgb(218, 234, 245);
            border-radius: 4px 0px 0px 4px;

            &::-webkit-input-placeholder {
              color: #ccc;
            }
          }

          span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 32px;
            background: rgb(68, 162, 255);
            border-radius: 0px 4px 4px 0px;

            color: rgb(255, 255, 255);
          }
        }
      }
    }
  }

  .policyNotice_condition {
    overflow: hidden;
    padding: 20px 0 12px 20px;
    margin-top: 10px;

    .policyNotice_condition_left {
      float: left;

      span {
        font-size: 14px;
        padding: 5px 6px;
        color: rgb(51, 51, 51);
        line-height: 26px;
      }
    }

    .policyNotice_condition_right {
      margin-left: 97px;
      overflow: hidden;

      li {
        padding: 5px 11px;
        background-color: #fff;
        float: left;
        margin: 0 10px 6px 10px;

        span {
          float: left;
          font-size: 14px;
          color: #333333;
          float: left;
        }

        img {
          float: left;
          width: 10px;
          padding: 3px 4px;
          box-sizing: content-box;
          margin: 2px 0 0 4px;
          cursor: pointer;
        }
      }
    }
  }

  .policyNotice_total {
    line-height: 40px;
    font-size: 14px;
    color: #333;

    span {
      color: #44a2ff;
      margin: 0 4px;
      font-size: 14px;
    }
  }

  .policyNotice_content {
    margin-top: 30px;

    .company {
      width: 480px;
      padding: 0 20px 0 10px;
    }

    .region {
      width: 180px;
    }

    .name {
      width: 220px;
    }

    .category {
      width: 200px;
    }

    .particularYear {
      width: 120px;
    }

    .policyNotice_content_top {
      overflow: hidden;
      border-radius: 4px;
      background-color: rgb(40, 98, 173);

      div {
        line-height: 50px;
        font-size: 16px;
        color: #fff;
        float: left;
      }
    }

    .policyNotice_content_content {
      margin-top: 10px;
      background-color: rgb(255, 255, 255);
      border-radius: 4px;
      position: relative;

      .nodata {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 540px;
        font-size: 14px;
        text-align: center;

        p {
          font-size: 14px;
          margin: 10px auto;

          a {
            color: #1d78de;
          }
        }
      }

      .policyNotice_content_content_content {
        display: flex;
        align-items: center;
        padding: 16px 10px;
        border-bottom: 1px solid #f2faff;
        transition: all 0.3s;

        &:hover {
          box-shadow: rgb(238, 238, 238) -1px 3px 6px;
        }

        & > div {
          padding-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .unit {
          width: 480px;

          &:hover {
            color: rgb(68, 162, 255);
          }
        }

        .region {
          width: 180px;
        }

        .policy_name {
          width: 220px;
        }

        .category {
          width: 200px;
        }

        .year {
          width: 120px;
        }
      }
    }
  }

  .policyNotice_bottom {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0 20px;
    text-align: right;
  }
}
</style>
